<template>
  <div>
    <!-- <div id="box"></div> -->
    <vertical-menu></vertical-menu>
    <div id="circle1"></div>
    <div id="circle2"></div>
    <div id="base">
      <div class="content">
        <div class="page-header">
          <div class="week">
            <i class="el-icon-arrow-left" @click="lastweek()"></i>
            <i class="el-icon-arrow-right" @click="nextweek()"></i>
            <div class="date">
              <div class="date1">
                {{date1.date}}
              </div>
              <div class="conection">
                <span>-</span>
              </div>
              <div class="date2">
                {{date2.date}}
              </div>
            </div>
          </div>
          <div class="day">
            <el-radio-group v-model="weekday">
              <!-- <el-radio-button label="Sun">Sun.</el-radio-button>
              <el-radio-button label="Mon">Mon.</el-radio-button>
              <el-radio-button label="Tues">Tues.</el-radio-button>
              <el-radio-button label="Wed">Wed.</el-radio-button>
              <el-radio-button label="Thur">Thur.</el-radio-button>
              <el-radio-button label="Fri">Fri.</el-radio-button>
              <el-radio-button label="Sat">Sat.</el-radio-button> -->
              <el-radio-button
                v-for="(item, index) in weeks"
                :key="index"
                :label="item.label"
                @click.native="getDayClock(item.time)">
              </el-radio-button>
            </el-radio-group>
          </div>
        </div>
        <el-row
          type="flex"
          v-for="(item,index) in department"
          :key="index"
          class="department-part">
          <el-col :span="4">
            <div class="block-left">
              <div class="first-row">
                <i class="el-icon-department iconfont"></i>
              </div>
              <div class="second-row">
                <span>{{item.departmentName}}</span>
              </div>
              <div class="second-row">
                <span>({{item.actualNumber}}/{{item.totalNumber}})</span>
              </div>
            </div>
          </el-col>
          <el-col :span="20">
            <div>
              <el-table
                :data="item.clockSituationList"
                :cell-style="{textAlign:'center'}"
                :header-cell-style="{background:'rgba(238, 229, 185,0.4)',textAlign:'center',color:'#606266',fontWeight:'600'}"
                border>
                <el-table-column type="expand">
                  <!-- eslint-disable-next-line -->
                  <template slot-scope="scope">
                    <el-col :span="4">
                      <div class="expand">
                        <span>Today's record</span>
                      </div>
                    </el-col>
                    <el-col :span="20">
                      <div
                        v-for="(item,index) in scope.row.everydayClocklist"
                        :key="index"
                        class="record-time">
                        <div class="moment">
                          {{formatTime(item.clockIn)}}
                        </div>
                        <div style="display: inline-block">
                          <span>-</span>
                        </div>
                        <div class="moment">
                          {{formatTime(item.clockOut)}}
                        </div>
                        <i class="el-icon-add-file iconfont"></i>
                      </div>
                    </el-col>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="name"
                  label="Name">
                </el-table-column>
                <el-table-column
                  prop="role"
                  label="Role">
                  <template slot-scope="scope">
                    <span v-if="scope.row.role">{{scope.row.role}}</span>
                    <span v-else>-</span>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="rosterTime"
                  label="Roster Time">
                </el-table-column>
                <el-table-column
                  prop="clockIn"
                  label="Last Clock in">
                  <template slot-scope="scope">
                    <span v-if="scope.row.clockIn">{{scope.row.clockIn}}</span>
                    <span v-else>--:--</span>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="clockOut"
                  label="Last Clock Out">
                  <template slot-scope="scope">
                    <span v-if="scope.row.clockOut">{{scope.row.clockOut}}</span>
                    <span v-else>--:--</span>
                  </template>
                </el-table-column>
                <el-table-column
                  label="Situation">
                  <template slot-scope="scope">
                    <el-tag :type="(scope.row.situation === 'Normal' ? 'success' : (scope.row.situation === 'Absence' ? 'danger' : (scope.row.situation === 'Leave' ? 'info' : 'warning')))">
                      {{scope.row.situation}}
                    </el-tag>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
import VerticalMenu from '@/components/VerticalMenu'
export default {
  name: 'Today',
  components: {
    VerticalMenu
  },
  data() {
    return {
      user: {},
      date1: {
        date: '',
        time: '',
      },
      date2: {
        date: '',
        time: '',
      },
      weekNum: '08',
      weekday: '',
      week: ['Sun','Mon','Tues','Wed','Thur','Fri','Sat'],
      weeks:[{
        label: 'Sun.',
        time: '',
      },{
        label: 'Mon.',
        time: '',
      },{
        label: 'Tues.',
        time: '',
      },{
        label: 'Wed.',
        time: '',
      },{
        label: 'Thur.',
        time: '',
      },{
        label: 'Fri.',
        time: '',
      },{
        label: 'Sat.',
        time: '',
      }],
      // department: ['Department1','Department2'],
      num1: 3,
      num2: 6,
      department: [],
      nowDate: '',
      // department: [{
      //   totalNumber: 3,
      //   actualNumber: 0,
      //   departmentName: 'Sales Department',
      //   clockSituationList: [{
      //     name: 'Mike',
      //     role: 'Manager',
      //     rosterTime: '9:00-16:00',
      //     clockIn: '8:00',
      //     clockOut: '16:05',
      //     situation: 'Normal',
      //   },{
      //     name: 'Bob',
      //     role: 'staff',
      //     rosterTime: '9:00-16:00',
      //     clockIn: '8:30',
      //     clockOut: '--:--',
      //     situation: 'Normal',
      //   },{
      //     name: 'Cindy',
      //     role: 'staff',
      //     rosterTime: '9:00-16:00',
      //     clockIn: '9:05',
      //     clockOut: '16:05',
      //     situation: 'Late Arrival',
      //   },{
      //     name: 'Cale',
      //     role: 'staff',
      //     rosterTime: '9:00-16:00',
      //     clockIn: '--:--',
      //     clockOut: '--:--',
      //     situation: 'Absence',
      //   },{
      //     name: 'Alan',
      //     role: 'staff',
      //     rosterTime: '9:00-16:00',
      //     clockIn: '8:30',
      //     clockOut: '15:40',
      //     situation: 'Early Departure',
      //   },{
      //     name: 'Dabby',
      //     role: 'staff',
      //     rosterTime: '9:00-16:00',
      //     clockIn: '--:--',
      //     clockOut: '--:--',
      //     situation: 'Leave',
      //   }]
      // }],
      // recordTime: [{
      //   time1: '9:00',
      //   time2: '11:30',
      // },{
      //   time1: '12:00',
      //   time2: '16:30',
      // },{
      //   time1: '17:00',
      //   time2: '21:00',
      // }]
    }
  },
  created() {
    this.getWeekday();
    // this.department = JSON.parse(sessionStorage.getItem('department'));
    this.user = JSON.parse(sessionStorage.getItem('user'));

    // this.nowDate = new Date();
    // this.getClockSituation(this.nowDate.valueOf());
  },
  mounted() {
    this.nowDate = new Date().valueOf();
    this.department = JSON.parse(sessionStorage.getItem('clockSituation'));
    if(this.department === null ){
      this.getClockSituation(Math.round(this.nowDate / 1000));
    }
    // this.getClockSituation(Math.round(this.nowDate / 1000));
    if(JSON.parse(sessionStorage.getItem('department')) === null){
      this.getAllDepartment();
    }
    if(JSON.parse(sessionStorage.getItem('staffData')) === null){
      this.getAllStaff();
    }
  },
  methods: {
    getWeekday() {
      let nowData = new Date();
      let currentDay = nowData.getDay();
      const _this = this;
      _this.weekday = _this.week[currentDay]+'.';
      // console.log(_this.weekday);
      //get Sunday
      let sunDayTime = nowData.getTime() - currentDay * 24 * 60 * 60 * 1000;
      //get Saturday
      let satDayTime = nowData.getTime() + (6 - currentDay) * 24 * 60 * 60 * 1000;
      _this.date1.time = sunDayTime;
      _this.date1.date = _this.changeDay(sunDayTime);
      _this.date2.time = satDayTime;
      _this.date2.date  = _this.changeDay(satDayTime);
      // console.log(_this.date1)
      for(var i = 0; i < 7; i++){
        _this.weeks[i].time = sunDayTime + i * 24 * 60 * 60 * 1000;
      }
    },
    getTime(date){
      var timeStr = '';
      console.log("time"+date);
      timeStr += date.getHours() < 10 ? ('0' + date.getHours()) : date.getHours();
      timeStr += ':';
      timeStr += date.getMinutes() < 10 ? ('0' + date.getMinutes()) : date.getMinutes();
      return timeStr;
    },
    lastweek(){
      const _this = this;
      //get Sunday
      let sunDayTime = _this.date1.time - 7 * 24 * 60 * 60 * 1000;
      //get Saturday
      let satDayTime = _this.date2.time - 7 * 24 * 60 * 60 * 1000;
      _this.date1.time = sunDayTime;
      _this.date1.date = _this.changeDay(sunDayTime);
      _this.date2.time = satDayTime;
      _this.date2.date  = _this.changeDay(satDayTime);
      for(var i = 0; i < 7; i++){
        _this.weeks[i].time = sunDayTime + i * 24 * 60 * 60 * 1000;
      }
      _this.nowDate -= 7 * 24 * 60 * 60 * 1000;
      _this.getClockSituation(Math.round(_this.nowDate / 1000));
    },
    nextweek(){
      const _this = this;
      //get Sunday
      let sunDayTime = _this.date1.time + 7 * 24 * 60 * 60 * 1000;
      //get Saturday
      let satDayTime = _this.date2.time + 7 * 24 * 60 * 60 * 1000;
      _this.date1.time = sunDayTime;
      _this.date1.date = _this.changeDay(sunDayTime);
      _this.date2.time = satDayTime;
      _this.date2.date  = _this.changeDay(satDayTime);
      for(var i = 0; i < 7; i++){
        _this.weeks[i].time = sunDayTime + i * 24 * 60 * 60 * 1000;
      }
      _this.nowDate += 7 * 24 * 60 * 60 * 1000;
      _this.getClockSituation(Math.round(_this.nowDate / 1000));
    },
    changeDay(date){
      var m=new Array('Jan.','Feb.','Mar.','Apr.','May.','Jun.','Jul','Aug.','Sep.','Oct.','Nov.','Dec');
      var d=new Array("st","nd","rd","th");
      var mn = new Date(date).getMonth();
      var dn = new Date(date).getDate();
      var dns;
      if(((dn%10)<1) ||((dn%10)>3)){
        dns = d[3];
      }else {
        dns=d[(dn%10)-1];
        if((dn==11)||(dn==12)){
          dns=d[3];
        }
      }
      return dn + dns + ' '+ m[mn]
    },
    formatTime(date){
      var date = new Date(date);
      var hh = (date.getHours() + 1 < 10 ? '0' + (date.getHours()) : date.getHours()) + ':';
      var mm = (date.getMinutes() < 10 ? '0' + (date.getMinutes()) : date.getMinutes());
      // var ss = (date.getSeconds() < 10 ? '0' + (date.getSeconds()) : date.getSeconds());
      return hh + mm;
    },
    getDayClock(val){
      const _this = this;
      console.log(val);
      _this.nowDate = val;
      _this.getClockSituation(Math.round(_this.nowDate / 1000));
    },
    getAllDepartment() {
      const _this = this
      _this.$api.department.getAllDepartment().then(res => {
        if (res.data.code === 2000) {
          // _this.department = res.data.data;
          sessionStorage.setItem('department',JSON.stringify(res.data.data));
        } else {
          _this.$message.error(res.data.message);
        }
      }).catch(err => {
        console.log(err);
      })
    },
    getClockSituation(val) {
      const _this = this;
      // console.log(val);
      // console.log('_this.nowDate:' + Math.round(_this.nowDate / 1000));
      let arr = {
        startTime: val,
        finishTime: val
      };
      _this.$api.clock.getClockSituation(_this.user.number, arr).then(res => {
        if(res.data.code === 2000){
          _this.department = res.data.data;
          console.log(_this.department)
        } else {
          _this.$message.error(res.data.message);
        }
      }).catch(err => {
        console.log(err);
      })
    }
  }
}
</script>

<style  lang="less" scoped>
  #box {
    height: 100%;
    width: 100%;
    position: fixed;
    background-color: #F2F2F2;
  }

  #base {
    margin: 0 0 0 250px;
    height: 744px;
    padding-top: 10px;
    background-color: #F2F2F2;
  }

  .content {
    padding-bottom: 20px;
    background-color: #F2F2F2;
  }

  .page-header {
    width: 1234px;
    height: 64px;
    background-color: rgba(242,235,211,0.3);
    border: 2px solid rgba(150, 169, 97,0.5);
    border-radius: 5px;
    margin: 0 20px 20px 15px;
    line-height: 64px;
  }

  .week {
    width: 400px;
    height: 64px;
    margin: 0 0 0 5px;
    display: inline-block;
  }

  .el-icon-arrow-left {
    line-height: 64px;
    font-size: 45px;
    float: left;
    color: #797979;
    cursor:pointer;
  }

  .el-icon-arrow-right {
    line-height: 64px;
    font-size: 45px;
    float: right;
    color: #797979;
    cursor:pointer;
  }

  .date {
    height: 35px;
    width: 350px;
    margin: 0 auto;
    margin-top: 14px;
    font-size: 25px;
    line-height: 35px;
    text-align: center;
    color: #473C33;
  }

  .conection{
    width: 13px;
    height: 35px;
    margin: 0 5px;
    display: inline-block;
  }

  .date1 {
    height: 35px;
    width: 135px;
    background-color: rgba(150, 169, 97,0.5);
    border-radius: 5px;
    display: inline-block;
  }

  .date2 {
    height: 35px;
    width: 135px;
    background-color: rgba(150, 169, 97,0.5);
    border-radius: 5px;
    display: inline-block;
  }

  .day {
    display: inline-block;
    margin-left: 20px;
  }

  /deep/ .el-radio-button {
    margin-right: 10px;
    border: none;
  }

  /deep/ .el-radio-button__inner {
    border: none;
    background-color: rgba(238, 229, 185,0);
    width: 100px;
    font-style: italic;
    font-weight: 600;
    color: #7F8F53;
    border-radius: 10px;
  }

  /deep/ .el-radio-button__orig-radio:checked+.el-radio-button__inner {
    border-radius: 10px;
  }

  // /deep/ .el-radio-button__orig-radio:checked+.el-radio-button__inner {
  //   border: none;
  //   font-style: italic;
  //   font-weight: 600;
  // }

  .department-part {
    margin-left: 15px;
    margin-bottom: 15px;
    margin-right: 15px;
  }

  .block-left {
    height: 100%;
    background-color: #F0EDDB;
    border: 2px solid rgba(150, 169, 97,0.5);
    border-radius: 5px;
    text-align: center;
    font-size: 20px;
    font-weight: 600;
    color: #473C33;
    margin-right: 15px;
    .first-row {
      margin-top: 50%;
    }
    .second-row {
      margin-top: 20px;
    }
  }

  /deep/ .el-table {
    min-height:300px;
    background-color:#F2F2F2;
  }

  /deep/ .el-table--border{
    border: 2px solid rgba(150, 169, 97,0.5);
    border-radius: 5px;
  }

  /deep/ .el-table__empty-block {
    background-color: #F2F2F2;
  }

  /deep/ .el-table tr{
    background-color: #F2F2F2;
  }

  /deep/ .el-table td{
    border: 0px;
    border-bottom: 1px solid rgba(150, 169, 97,0.5);
  }

  /deep/ .el-table__cell, .el-table__expanded-cell{
    background-color: #F2F2F2;
  }

  .expand {
    line-height: 30px;
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    color: rgba(246,119,28,0.9);
  }

  .record-time {
    text-align: center;
    margin-right: 20px;
    display: inline-block;
    font-size: 16px;
    .moment {
      line-height: 25px;
      height: 25px;
      width: 60px;
      margin: 0 5px;
      background-color: rgba(150, 169, 97,0.2);
      border-radius: 5px;
      display: inline-block;
      vertical-align: middle;
    }
    .el-icon-add-file {
      font-size: 30px;
      color: rgba(246,119,28,0.9);
      vertical-align: middle;
    }
  }

  .el-icon-department{
    font-size: 35px;
    color: #ABC270;
    vertical-align: middle;
  }

  #circle1 {
    border-width: 1px;
    position: absolute;
    left: 1318px;
    top: -39px;
    width: 150px;
    height: 150px;
    display: flex;
    border-radius:50%;
    background-color: rgba(253,167,105,0.24);
  }

  #circle2 {
    border-width: 1px;
    position: absolute;
    left: 1418px;
    top: 61px;
    width: 100px;
    height: 100px;
    display: flex;
    border-radius:50%;
    background-color: rgba(150,169,97,0.24);
  }
</style>
